# Блог «Нетологии»

### Реализация

#### В песочнице CodePen

Перед началом работы сделайте форк пена на [https://codepen.io/Netology/pen/ReaoGE](https://codepen.io/Netology/pen/ReaoGE?editors=1100#0). Вносите изменения во вкладках HTML и CSS.

##### Внимание: Общую структуру документа создавать не надо, вкладка Codepen «HTML» работает, как тег `<body>`
см. [инструкцию по работе с Codepen](https://github.com/netology-code/guides/tree/master/codepen).

---

## Описание

Кощей Бессмертный очень хотел обучаться в Нетологии на курсе верстки. Но он не успел записаться на курс, и его не приняли. Он так разозлился, что использовал черную магию, которая безвозвратно испортила верстку в разделе "Блог Нетологии".

Хватит ли у вас знаний, чтобы исправить испорченный код?

Сейчас страница блога выглядит так:

![](https://netology-code.github.io/html-2-homeworks/sources/2-2/blog-before.jpg)

Вам нужно привести блок к исходному виду:

![](https://netology-code.github.io/html-2-homeworks/sources/2-2/blog-after.jpg)

## Процесс реализации

1. Найдите ошибки во вложенности HTML-элементов и исправьте их. В результате каждая карточка должна содержать дату публикации, заголовок и описание новости. **Изменять сами теги не нужно.**

При этом внешний вид верстки должен измениться следующим образом:

![](https://netology-code.github.io/html-2-homeworks/sources/2-2/blog-stage0.jpg)

2. Сделайте так, чтобы карточки располагались по 3 в ряд, как показано в макете.
3. Установите отступ сверху `30px` для элементов с классом `card`, начиная с 4го элемента.
4. Установите отступ слева и справа по `30px` для элементов с классом `card`, начиная со 2го элемента и далее через каждые 3 элемента (то есть, для 2го, 5го и т.д.).
5. Убедитесь, что результат соответствует описанию. Для этого перейдите в режим FullPage ([скриншот](/sources/screen.md)). Если режим FullPage View выдал ошибку — вам нужно подтвердить свою учетную запись в codepen, пройдя по ссылке из письма, пришедшего от codepen, тогда все должно начать работать корректно.

